<script setup lang="ts">
import {ref,onMounted} from 'vue'
import type { DeptModelArray, DeptModel} from '@/api/model/model'
import {queryAllApi,addApi,queryInfoApi,updateApi,deleteApi} from '@/api/dept';
import { ElMessage, ElMessageBox } from 'element-plus'

//声明列表展示数据
let tableData = ref<DeptModelArray>([])
const queryAll=async()=>{
  const res = await queryAllApi();
  tableData.value=res.data
}
onMounted(()=>{
  queryAll()
})

const dialogFormVisible = ref<boolean>(false) 
const deptForm = ref<DeptModel>({name: ''})
const formTitle = ref<string>('')

//点击新增按钮触发的函数
const add = () => {
  formTitle.value = '新增部门'
  dialogFormVisible.value = true
  deptForm.value = {name: ''}
}

//点击保存按钮-发送异步请求
const save = async () => {
 /*  const result = await addApi(deptForm.value) */
 let result=null;
 if(deptForm.value.id){
   result = await updateApi(deptForm.value)//修改
 }else{
   result = await addApi(deptForm.value)//新增
 }
  if(result.code){
    ElMessage.success('操作成功')
  }else{
    ElMessage.error(result.msg)
  }
  dialogFormVisible.value = false
  queryAll()
}

//修改部门-查询回显
const update = async (id:number) => {
  formTitle.value = '修改部门'
  dialogFormVisible.value = true
  deptForm.value = {name: ''}

  const result = await queryInfoApi(id)
  deptForm.value = result.data
}

const deldete = async(id:number) => {
  ElMessageBox.confirm(
    '您确定删除此数据吗？',
    '删除部门',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const res = await deleteApi(id)
      if(res.code){
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
      }else{
        ElMessage({
        type: 'error',
        message: '删除失败',
      })
      }
      queryAll()
      })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

</script>

<template>
  <h1>部门管理</h1>
  <el-button type="primary" style="float: right" @click="add">+ 新增</el-button>
  <br><br>

  <!-- 部门数据表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" label="序号"  width="80"  align="center"/>
    <el-table-column prop="name" label="部门名称" width="250"  align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="300"  align="center"/>
    <el-table-column label="操作"  align="center">
      <template #default="scope">
        <el-button size="small" type="primary" @click="update(scope.row.id)">修改</el-button>
        <el-button size="small" type="danger"  @click="deldete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="30%">
    <el-form :model="deptForm">
      <el-form-item label="部门名称" label-width="80px">
        <el-input v-model="deptForm.name" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>

